<clr-vertical-nav [clrVerticalNavCollapsible]="true"
                  [clr-nav-level]="2"
                  class="nav-trigger--bottom">

  <clr-vertical-nav-group [(clrVerticalNavGroupExpanded)]="unitGroup.isExpanded"
                          routerLinkActive="active"
                          *ngFor="let unitGroup of ms.game.unlockedGroups; trackBy:getListId">

    <a class="font-weight-bold"
       clrVerticalNavLink
       [routerLink]="['./group/'+unitGroup.id]"
       [routerLinkActive]="'active'">
      <!-- <clr-icon [attr.shape]="unitGroup.icon" clrVerticalNavIcon></clr-icon> -->
      {{unitGroup.name}}
      <clr-icon class="is-error is-solid"
                shape="exclamation-triangle"
                *ngIf="unitGroup.isEnding"></clr-icon>
      <clr-icon class="is-info is-solid"
                shape="angle"
                *ngIf="unitGroup.upTeam"></clr-icon>
      <clr-icon class="is-info is-solid"
                shape="angle-double"
                *ngIf="unitGroup.upTwin"></clr-icon>
    </a>

    <clr-vertical-nav-group-children>

      <ng-container *clrIfExpanded>
        <app-unit-line *ngFor="let g of unitGroup.unlocked; trackBy:getUnitId"
                       [unit]="g"
                       [isStopped]="g.isStopped()"
                       [isEnding]="g.isEnding"
                       [id]="g.id"
                       [name]="g.name"
                       [quantity]="g.quantity"
                       [perSec]="g.c"
                       [isNew]="g.isNew"
                       [team]="g.teamAction?.canBuy"
                       [twin]="g.twinAction?.canBuy"
                       [isMalus]="isMalus(g)"></app-unit-line>
      </ng-container>

    </clr-vertical-nav-group-children>
  </clr-vertical-nav-group>

</clr-vertical-nav>

<router-outlet></router-outlet>
